// JavaScript Document
//And, jQuery performs the following steps when a link is clicked:

//Get the height of the sub-panel. jQuery grabs the sub-panel id from href attribute of the anchor element.
//Remove selected class from all the links, and add the selected class to the user has just clicked.
//Do the animation on height, Animate the #mask by setting the height of the sub-panel.
//After that, run the scrollTo plugin, scroll it to the sub-panel.
//Remember to disable the link default behavior by adding 'Return false' in the end.

/*http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial*/

/*$(document).ready(function() {  
 
    //Get the height of the first item
    $('#mask').css({'height':$('#panel-1').height()});  
     
    //Calculate the total width - sum of all sub-panels width
    //Width is generated according to the width of #mask * total of sub-panels
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
     
    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
    $('#panel div').width($('#mask').width());
     
    //Get all the links with rel as panel
    $('a[rel=panel]').click(function () {
     
        //Get the height of the sub-panel
        var panelheight = $($(this).attr('href')).height();
         
        //Set class for the selected item
        $('a[rel=panel]').removeClass('selected');
        $(this).addClass('selected');
         
        //Resize the height
        $('#mask').animate({'height':panelheight},{queue:false, duration:500});         
         
        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
        $('#mask').scrollTo($(this).attr('href'), 800);     
         
        //Discard the link default behavior
        return false;
    });
     
});*/

$(document).ready(function () {
 
    //set the default location (fix ie 6 issue)
    $('.lava').css({left:$('span.item:first').position()['left']});
     
    $('.item').mouseover(function () {
     
        //scroll the lava to current item position
        $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
             
        //scroll the panel to the correct content
        $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
    });
         
});